<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<link rel="stylesheet" type="text/css" href="../../css/demo.css" />
<script src="../../js/demo.js" type="text/javascript" charset="utf-8"></script>
<title>分类</title>
</head>
<body>
	<!--header-->
	<div class="header">
		<div class="header-content">
			<ul class="nav left">
				<li><img src="../../img/regist-arrow.png" /></li>
				<li class="nav-one"><a href="javascript:history.go(-1);">返回</a></li>
				<li class="nav-two"><a href="../../">关闭</a></li>
			</ul>
			<p class="left">侨盟小店</p>
			<div class="right nav_right">
				<img src="../../img/regist-list.png" />
			</div>
		</div>
	</div>
	<!--main-->
	<div class="main clear" style="margin-bottom: 1.11rem;">
		<div class="divide">
			<div class="divide-search">
				<div class="divide-search-M left">
						<label for="search"> 商品 <img
							src="../../img/shopmanagement-icon8.png" alt="" /> <img
							src="../../img/shopmanagement-icon13.png" />
						</label> <input type="text" name="search" id="divide-search" value=""
							placeholder="请输入关键词搜索" /> <img
							src="../../img/shopmanagement-icon9.png"
							style="float: right; margin-top: 0.2rem; margin-right: 0.29rem;" onclick="seacherProviderGood()" />
				</div>
				<img src="../../img/divide-icon.png" class="right" />
			</div>
		</div>
		<div class="divide2">
			<div class="divide-content">
				<ul class="divide-content-left left">
					<li class="active_red">推荐分类</li>
				</ul>
				<div class="divide-content-right left">
					<ul class="divide-turn">
						<li><img src="../../imgs/divide-pic1.jpg" /></li>
					</ul>
					<p>
						热门分类<img src="../../img/divide-line.png" alt=""
							style="width: 3.45rem; margin-left: 0.21rem;" />
					</p>
					<ul class="divide-turn-list">
						<li class="divide-one" hidden="hidden"></li>
						<li class="divide-two" hidden="hidden"></li>
						<li class="divide-thr divide-different" hidden="hidden"></li>
						<li class="divide-fou" hidden="hidden"></li>
						<li class="divide-fiv" hidden="hidden"></li>
						<li class="divide-six divide-different" hidden="hidden"></li>
						<li class="divide-sev" hidden="hidden"></li>
						<li class="divide-eig" hidden="hidden"></li>
						<li class="divide-nin divide-different" hidden="hidden"></li>
						<li hidden="hidden"></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="footer2">
		<ul class="nav-foot2">
			<li><a href="../../"><img
					src="../../img/shopopen-icon16.png"
					style="width: 0.33rem; height: 0.42rem; margin-left: 0.08rem;" /> <br />
				<span>首页</span> </a></li>
			<li><a href="../../html/shopdor/shopopen.html"><img
					src="../../img/divide-icon19.png"
					style="width: 0.44rem; height: 0.42rem; margin-left: 0.06rem;" /> <br />
				<span>开店</span> </a></li>
			<li><a href="javascript"><img
					src="../../img/divide-icon17.png"
					style="width: 0.42rem; height: 0.42rem; margin-left: 0.08rem;" /> <br />
				<span style="color: #f84e37;">分类</span> </a></li>
			<li><a href="../../html/selfcenter/distribution.html"><img
					src="../../img/shopopen-icon19.png"
					style="width: 0.4rem; height: 0.42rem; margin-left: 0.08rem;" /> <br />
				<span>我的</span> </a></li>
		</ul>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript">
		//查询一级分类
		selectAllGoodTypelevel1();
		//查询二级分类
		selectGoodTypelevel2("", "");
		//查询所有一级分类 
		function selectAllGoodTypelevel1() {
			$
					.ajax({
						type : "post",
						url : "/qiaomengapp/goodTypelevel1/api/selectAllGoodTypelevel1",
						success : function(data) {
							for ( var i in data) {
								var typeLevel1 = data[i];
								$(".divide-content-left")
										.append(
												"<li typeLevel1Id='"
														+ typeLevel1.id
														+ "' onclick='getGoodTypelevel1Id()' >"
														+ typeLevel1.name
														+ "</li>");
							}
						}
					});
		}

		//根据一级分类id
		function getGoodTypelevel1Id() {
			var $li = $(event.target);
			var typeLevel1Id = $li.attr("typeLevel1Id");
			//清除原本红色样式
			$li.siblings("li").removeClass("active_red");
			//点击的地方添加红色样式
			$li.addClass("active_red");
			selectGoodTypelevel2(typeLevel1Id, "");
		}

		//根据一级分类id查询二级分类
		function selectGoodTypelevel2(typeLevel1Id, pageNum) {
			$.ajax({
				type : "post",
				url : "/qiaomengapp/goodTypelevel2/api/selectGoodTypelevel2",
				data : "typelevel1Id=" + typeLevel1Id + "&pageNum=" + pageNum,
				success : function(data) {
					//清除上次显示内容
					if(data.pageNum == 1){
						$(".divide-turn-list li").html("");
						//进行重新隐藏
						$(".divide-turn-list li").attr("hidden", "hidden");
					}
					//清除按钮
					$(".divide-turn-list input").remove();
					for ( var i in data.list) {
						var typeLevel2 = data.list[i];
						if (data.pageNum == 1) {
							$(".divide-turn-list li:eq(" + i + ")").removeAttr(
									"hidden");
							$(".divide-turn-list li:eq(" + i + ")").html(
									"<img src='"+typeLevel2.imageUrl+"' typeLevel2Id='"+typeLevel2.id+"'/>"
											+ typeLevel2.name);
						} else {
							var $cloneLi = $(".divide-turn-list li:eq(" + i + ")").clone(true);
							$cloneLi.html(
									"<img src='"+typeLevel2.imageUrl+"' typeLevel2Id='"+typeLevel2.id+"'/>"
									+ typeLevel2.name);
							$(".divide-turn-list").append($cloneLi);
						}
					}
					//是否需要加载更多按钮
					if (data.list.length == 9) {
						$(".divide-turn-list").append(
								"<input type='button' style='margin-top:20px;height:30px;font-size:16px;'"
										+ "value='加载更多......'	typeLevel1Id='"
										+ typeLevel1Id + "' pageNum='"
										+ (data.pageNum + 1) + "' onclick='loadMore()'/>");
					}
				}
			});
		}

		//点击加载跟多
		function loadMore() {
			var $btn = $(event.target);
			var typeLevel1Id = $btn.attr("typeLevel1Id");
			var pageNum = $btn.attr("pageNum");
			//发送请求
			selectGoodTypelevel2(typeLevel1Id, pageNum);
		}
		
		//点击搜索商品
		function seacherProviderGood(){
			var $img = $(event.target);
			var $input = $img.siblings("input");
			//得到输入的请求参数
			var search = $input.val();
			location="../../html/product/productadd.html?"+search;
		}
	</script>
</body>
</html>